<template>
<view>
    <img class="myimg" src="https://www.heytea.com/img/bg1.jpg" alt="">
    <form action="/">
        <van-search v-model="value"  show-action input-align="center" placeholder="请输入搜索关键词" @search="onSearch" @cancel="onCancel"/>
    </form>
	<view class="kind">
		<view class="icon" @click="changeType(0)">
			<van-image width="120rpx" height="100rpx" src="http://47.108.197.149:8080/images/0.jpg" />
			<view class="word">全部商品</view>
		</view>
		<view class="icon" @click="changeType(1)">
			<van-image width="120rpx" height="100rpx" src="http://47.108.197.149:8080/images/1.jpg" />
			<view class="word1">蔬菜</view>
		</view>
		<view class="icon" @click="changeType(2)">
			<van-image width="120rpx" height="100rpx" src="http://47.108.197.149:8080/images/2.jpg" />
			<view class="word1">水果</view>
		</view>
		<view class="icon" @click="changeType(3)">
			<van-image width="120rpx" height="100rpx" src="http://47.108.197.149:8080/images/3.jpg" />
			<view class="word1">肉禽</view>
		</view>
		<view class="icon" @click="changeType(4)">
		 	<van-image width="120rpx" height="100rpx" src="http://47.108.197.149:8080/images/4.jpg" />
			 <view class="word1">干货</view>
		</view>
		<view class="icon" @click="changeType(5)">
			<van-image width="120rpx" height="100rpx" src="http://47.108.197.149:8080/images/5.jpg" />
			<view class="word1">日用</view>
		</view>
		<view class="icon" @click="changeType(6)">
			<van-image width="120rpx" height="100rpx" src="http://47.108.197.149:8080/images/6.jpg" />
			<view class="word1">海鲜</view>
		</view>
		<view class="icon" @click="changeType(7)">
			<van-image width="120rpx" height="100rpx" src="http://47.108.197.149:8080/images/7.jpg" />
			<view class="word1">零食</view>
		</view>
	</view>
	
    <view class="text2"><text>点击上面的标签选择商品分类</text></view>
    <view class="text"><text>发现生活中的趣事</text></view>
     
    <view class="goodsContent">
	<view class="goodsLeftList" >
		<view class="goodsItem" @click="toMore(item.id,item.name,item.price,item.image)" v-for="item in goodsLeftList" :key="item.id">
			<image v-if="imgUrl" :src="imgUrl+item.image" @load="onImageLoad" mode="widthFix"></image>
			<view class="goodsName">{{item.name}}</view>
			<view class="goodsPrice">
				<image  src="../../static/百货.png"  mode="widthFix"></image>
				<text>{{item.price}}￥/500g</text>
			</view>
		</view>
	</view>
	<view class="goodsRightList">
		<view class="goodsItem" @click="toMore(item.id,item.name,item.price,item.image)" v-for="item in goodsRightList" :key="item.id">
			<image v-if="imgUrl" :src="imgUrl+item.image" @load="onImageLoad" mode="widthFix"></image>
			<view class="goodsName">{{item.name}}</view>
			<view class="goodsPrice">
				<image  src="../../static/百货1.png"  mode="widthFix"></image>
				<text>{{item.price}}￥/500g</text>
			</view>
		</view>
	</view>
</view>
    
</view>
</template>
<script>
const imgUrl = 'http://47.108.197.149:8080/images/'
const url = 'http://47.108.197.149:8081'
export default {
    data(){
        return{
		name:'主页',
		imgUrl : 'http://47.108.197.149:8080/images/',
		value: '',
		goodsList:[],
        goodsListCount:0,  //加载第i张图片
        // 左侧商品列表
        goodsLeftList:[],
        goodsLeftListHeight : 0,
        // 右侧商品列表
        goodsRightList:[],
        goodsRightListHeight : 0,
		value1: 0,
		value2: "a",
        }
    },
    onLoad(){},
	created(){
		this.changeType(0)
	},
    methods:{
        onSearch(value) { //用户在键盘上点击搜索按钮，搜索相应内容 //拿到搜索框里的内容
        },
        onCancel(val) {   //用户点击取消，系统提示取消搜索
            uni.showToast({
                title: "取消搜索",
                duration: 2000
            });
        },
		toMore(id,name,price,src){  //传给App.vue的globalData里面的goodsMore，存放点进去的商品信息
			getApp().globalData.goodsMore[0].id = id 
			getApp().globalData.goodsMore[0].goodsName = name 
			getApp().globalData.goodsMore[0].goodsPrice = price 
			getApp().globalData.goodsMore[0].imgSrc = this.imgUrl+src
			uni.navigateTo({
				url:'../GoodsMore/GoodsMore'
			})
		},
        // -------------------------
        // 图片绑定事件，通过比较左右列表高度，实现瀑布流展示
onImageLoad: function(e){
	let divWidth = 295;			//显示的单栏宽度，我设为295rpx
	let oImgW = e.detail.width; //图片原始宽度
	let oImgH = e.detail.height; //图片原始高度
	let rImgH = divWidth*oImgH/oImgW;	//根据宽高比计算当前载入的图片的高度
	if(rImgH > 600){
		rImgH = 600;       //限制图片最高600rpx，可在css中添加 max-height:600rpx;  
	}
	if(this.goodsListCount==0){
		this.goodsLeftListHeight += rImgH;	//第一张图片高度加到goodsLeftListHeight 
		this.goodsListCount++;			//图片索引加1
		this.goodsRightList.push(this.goodsList[this.goodsListCount]);	//添加第二张图片到goodsRightList数组，因为第一张已经初始化到左侧列表中
	}else{
		this.goodsListCount++;		//图片索引加1
			if(this.goodsLeftListHeight > this.goodsRightListHeight){		//把图片的高度加到目前高度更低的栏中
				this.goodsRightListHeight += rImgH;		//第二张图片高度加到goodsRightListHeight 
			}else{
				this.goodsLeftListHeight += rImgH;
			}
		if(this.goodsListCount<this.goodsList.length){				//根据目前的栏高，把下一张图片，push到低的那栏
			if(this.goodsLeftListHeight > this.goodsRightListHeight){
				this.goodsRightList.push(this.goodsList[this.goodsListCount]);
			}else{
				this.goodsLeftList.push(this.goodsList[this.goodsListCount]);
			}
		}
	}
},
// 向商品列表添加第一张图片
async waterfallImage() {
	this.goodsLeftList.push(this.goodsList[0]);
},

        // -------------------------
	changeType(type){  //分类的请求方法
		let _this = this
        uni.request({
            url:url+'/app/goods/goodsList',
            method:'post',
			data:{
				'type':type
			},
            success (res){
				// console.log(res)
				// console.log(res.data.map.rightList[28])
				// let rarr = res.data.map.rightList
				// let rightArr = []
				// rarr.map(item =>{
				// 	if(item != undefined){
				// 		rightArr.push(item)
				// 	}
				// })
                _this.goodsLeftList = res.data.map.leftList
				_this.goodsRightList = res.data.map.rightList
            }
        })
	},	
}
}
</script>
<style scoped>
.mm{
    color: red;
}
.hh{
	border: 1px solid black;
}
.myimg{
    width: 100%;
}
.text{
    text-align: center;
    font-size: 10px;
    color: #ccc;
}
.text2{
    text-align: center;
    font-size: 12px;
    color: rgb(156, 154, 154);
}

/* 商品列表 */
	.goodsContent{
		width: 100%;
		background: #f7f7f7;
		display: flex;
		justify-content: center;
	}
	.goodsLeftList{
		margin:0 10rpx 0 40rpx;
		width: 325rpx;
	}
	.goodsRightList{
		margin:0 40rpx 0 10rpx;
		width: 325rpx;
	}
	.goodsItem{
		background: #FFFFFF;
		width:325rpx;
		margin-bottom: 15rpx;
	}
	.goodsItem image{
		max-height: 600rpx;
		height: auto;
		width:295rpx;
		padding: 15rpx 15rpx 5rpx;
	}
	.goodsName{
		font-size: 28rpx;
		color: #2e2e2e;
		padding: 0 20rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display:-webkit-box;
		-webkit-line-clamp:2;
		-webkit-box-orient:vertical;
	}
	.goodsPrice{
		color: #ffac29;
		font-size: 24rpx;
		padding: 0 15rpx;
	}
	.goodsPrice image{
		width: 20rpx;
		height: 20rpx;
		padding: 0 5rpx;
	}
.kind{
	margin: auto;
	width: 80%;
	height: 300rpx;
	z-index: 100;
	background-color: #fff;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}
.kind>view{
	margin-top: 5rpx;
	width: 20%;
	height: 100rpx;
	border: 1px solid #fff;
}
.word{
	position: absolute;
	bottom: -25rpx;
	left: 8rpx;
	font-size: 12px;
	color: rgb(138, 134, 134);
}
.word1{
	position: absolute;
	bottom: -25rpx;
	left: 33rpx;
	font-size: 12px;
	color: rgb(138, 134, 134);
}
.icon{
	position: relative;
}
.kk{
	width: 100%;
	display: flex;
	justify-content: center;
}
.shucai{
	display: inline-block;
	height: 60rpx;
	width: 100rpx;
	color: rgb(116, 114, 114);
	line-height: 60rpx;
	text-align: center;
	font-size: 28rpx;
	border: 1px solid #ccc;
	border-radius: 15rpx;
}
</style>